<template>

  <el-container class="full">
    <el-aside width="100px">
      <resource-tab before-url="/supplier/record/" class="full"/>
    </el-aside>
    <el-main>
      <el-card v-if="productType=='train'" class="box-card" v-for="record in trainList" :key="record.consumerRecordId">
        <el-descriptions :declare-var1="snapshot = record.snapshot" :declare-var2="resource = snapshot.json">
          <el-descriptions-item label="订单号">{{ record.consumeRecordId }}</el-descriptions-item>
          <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
          <el-descriptions-item label="出发时间">{{ resource.startTime }}</el-descriptions-item>
          <el-descriptions-item label="到达时间">{{ resource.reachTime }}</el-descriptions-item>
          <el-descriptions-item label="出发城市">{{ cityToStr(resource.startCity) }}</el-descriptions-item>
          <el-descriptions-item label="到达城市">{{ cityToStr(resource.destCity) }}</el-descriptions-item>
          <el-descriptions-item label="出发地址">{{ resource.startAddress }}</el-descriptions-item>
          <el-descriptions-item label="到达地址">{{ resource.destAddress }}</el-descriptions-item>
          <el-descriptions-item label="购买数量">{{ record.buyNum }}</el-descriptions-item>
          <el-descriptions-item label="付款金额">{{ record.buyNum * record.price }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ record.orderTime }}</el-descriptions-item>

          <el-descriptions-item label="订单状态">
            <el-tag class="ml-2" :type="orderStateTagType[record.orderState]">{{
                orderStateStr[record.orderState]
              }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="操作">
            <el-button type="primary" plain v-if="record.orderState == 0"
                       @click="updateState(record, 1)">用户开始消费
            </el-button>
            <el-button type="success" v-if="record.orderState == 1" plain
                       @click="updateState(record, 2)">用户结束消费
            </el-button>
            <el-button type="warning" v-if="record.orderState == 0" plain
                       @click="updateState(record, 4)">取消订单
            </el-button>
          </el-descriptions-item>

          <el-descriptions-item>
            <el-button type="primary" v-if="snapshot.changeTime==null" plain
                       @click="$router.push(`/supplier/detail/${productTypeStr[resource.productType]}/${resource.trafficId}`)">
              查看商品
            </el-button>
            <el-button type="primary" v-else plain
                       @click="$router.push(`/user/detail/snapshot/${resource.snapshotId}`)">
              查看交易快照
            </el-button>
          </el-descriptions-item>

        </el-descriptions>
      </el-card>
      <el-card v-if="productType=='flight'" class="box-card" v-for="record in flightList"
               :key="record.consumerRecordId">
        <el-descriptions :declare-var1="snapshot = record.snapshot" :declare-var2="resource = snapshot.json">
          <el-descriptions-item label="订单号">{{ record.consumeRecordId }}</el-descriptions-item>
          <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
          <el-descriptions-item label="出发时间">{{ resource.startTime }}</el-descriptions-item>
          <el-descriptions-item label="到达时间">{{ resource.reachTime }}</el-descriptions-item>
          <el-descriptions-item label="出发城市">{{ cityToStr(resource.startCity) }}</el-descriptions-item>
          <el-descriptions-item label="到达城市">{{ cityToStr(resource.destCity) }}</el-descriptions-item>
          <el-descriptions-item label="出发地址">{{ resource.startAddress }}</el-descriptions-item>
          <el-descriptions-item label="到达地址">{{ resource.destAddress }}</el-descriptions-item>
          <el-descriptions-item label="购买数量">{{ record.buyNum }}</el-descriptions-item>
          <el-descriptions-item label="付款金额">{{ record.buyNum * record.price }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ record.orderTime }}</el-descriptions-item>

          <el-descriptions-item label="订单状态">
            <el-tag class="ml-2" :type="orderStateTagType[record.orderState]">{{
                orderStateStr[record.orderState]
              }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="操作">
            <el-button type="primary" plain v-if="record.orderState == 0"
                       @click="updateState(record, 1)">用户开始消费
            </el-button>
            <el-button type="success" v-if="record.orderState == 1" plain
                       @click="updateState(record, 2)">用户结束消费
            </el-button>
            <el-button type="warning" v-if="record.orderState == 0" plain
                       @click="updateState(record, 4)">取消订单
            </el-button>
          </el-descriptions-item>

          <el-descriptions-item>
            <el-button type="primary" v-if="snapshot.changeTime==null" plain
                       @click="$router.push(`/supplier/detail/${productTypeStr[resource.productType]}/${resource.trafficId}`)">
              查看商品
            </el-button>
            <el-button type="primary" v-else plain
                       @click="$router.push(`/user/detail/snapshot/${resource.snapshotId}`)">
              查看交易快照
            </el-button>
          </el-descriptions-item>

        </el-descriptions>
      </el-card>
      <el-card v-if="productType=='hotel'" class="box-card" v-for="record in hotelList" :key="record.consumerRecordId">
        <el-descriptions :declare-var1="snapshot = record.snapshot" :declare-var2="resource = snapshot.json">
          <el-descriptions-item label="订单号">{{ record.consumeRecordId }}</el-descriptions-item>
          <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
          <el-descriptions-item label="所在城市">{{ cityToStr(resource.city) }}</el-descriptions-item>
          <el-descriptions-item label="所在地址">{{ resource.address }}</el-descriptions-item>
          <el-descriptions-item label="购买数量">{{ record.buyNum }}</el-descriptions-item>
          <el-descriptions-item label="付款金额">{{ record.buyNum * record.price }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ record.orderTime }}</el-descriptions-item>

          <el-descriptions-item label="订单状态">
            <el-tag class="ml-2" :type="orderStateTagType[record.orderState]">{{
                orderStateStr[record.orderState]
              }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="操作">
            <el-button type="primary" plain v-if="record.orderState == 0"
                       @click="updateState(record, 1)">用户开始消费
            </el-button>
            <el-button type="success" v-if="record.orderState == 1" plain
                       @click="updateState(record, 2)">用户结束消费
            </el-button>
            <el-button type="warning" v-if="record.orderState == 0" plain
                       @click="updateState(record, 4)">取消订单
            </el-button>
          </el-descriptions-item>

          <el-descriptions-item>
            <el-button type="primary" v-if="snapshot.changeTime==null" plain
                       @click="$router.push(`/supplier/detail/${productTypeStr[resource.productType]}/${resource.trafficId}`)">
              查看商品
            </el-button>
            <el-button type="primary" v-else plain
                       @click="$router.push(`/user/detail/snapshot/${resource.snapshotId}`)">
              查看交易快照
            </el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card v-if="productType=='scenic'" class="box-card" v-for="record in scenicList"
               :key="record.consumerRecordId">
        <el-descriptions :declare-var1="snapshot = record.snapshot" :declare-var2="resource = snapshot.json">
          <el-descriptions-item label="订单号">{{ record.consumeRecordId }}</el-descriptions-item>
          <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
          <el-descriptions-item label="所在城市">{{ cityToStr(resource.city) }}</el-descriptions-item>
          <el-descriptions-item label="所在地址">{{ resource.address }}</el-descriptions-item>
          <el-descriptions-item label="购买数量">{{ record.buyNum }}</el-descriptions-item>
          <el-descriptions-item label="付款金额">{{ record.buyNum * record.price }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ record.orderTime }}</el-descriptions-item>

          <el-descriptions-item label="订单状态">
            <el-tag class="ml-2" :type="orderStateTagType[record.orderState]">{{
                orderStateStr[record.orderState]
              }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="操作">
            <el-button type="primary" plain v-if="record.orderState == 0"
                       @click="updateState(record, 1)">用户开始消费
            </el-button>
            <el-button type="success" v-if="record.orderState == 1" plain
                       @click="updateState(record, 2)">用户结束消费
            </el-button>
            <el-button type="warning" v-if="record.orderState == 0" plain
                       @click="updateState(record, 4)">取消订单
            </el-button>
          </el-descriptions-item>

          <el-descriptions-item>
            <el-button type="primary" v-if="snapshot.changeTime==null" plain
                       @click="$router.push(`/supplier/detail/${productTypeStr[resource.productType]}/${resource.trafficId}`)">
              查看商品
            </el-button>
            <el-button type="primary" v-else plain
                       @click="$router.push(`/user/detail/snapshot/${resource.snapshotId}`)">
              查看交易快照
            </el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-main>
  </el-container>

</template>

<script setup>
import axios from "~/config/axios.js";
import {onBeforeMount, ref, watch} from "vue";
import {productTypeCode, productTypeStr, orderStateStr, orderStateTagType} from "~/config/const.js";
import {cityToStr, showSuccessAndReload} from "~/config/utils.js";
import {useRoute} from "vue-router";


const loading = ref(true)
const recordList = ref([]);
const trainList = ref([])
const flightList = ref([])
const hotelList = ref([])
const scenicList = ref([])
onBeforeMount(() => {
  axios.get('/records').then((res) => {
    recordList.value = res
    loading.value = false
  })
})
watch(recordList, () => {
  trainList.value = [], flightList.value = [], hotelList.value = [], scenicList.value = []
  recordList.value.forEach(r => {
    if (r.productType == productTypeCode.train) {
      trainList.value.push(r)
    } else if (r.productType == productTypeCode.flight) {
      flightList.value.push(r)
    } else if (r.productType == productTypeCode.hotel) {
      hotelList.value.push(r)
    } else if (r.productType == productTypeCode.scenic) {
      scenicList.value.push(r)
    }
  })
})

const watchRoute = useRoute()
const productType = ref(watchRoute.params.productTypeStr)
watch(() => watchRoute.params, () => {
  productType.value = watchRoute.params.productTypeStr
})


const updateState = async ({consumeRecordId,updateTime}, orderState) => {
  axios
      .put(`/record/${consumeRecordId}/${updateTime}/${orderState}`)
      .then((res) => {
        showSuccessAndReload()
      });
};

const fetchData = () => {
  axios.get("/records").then((res) => {
    recordList.value = res;
  });
};
fetchData();
</script>


<style>
</style>